<template>
	<div style="background-color: #fff;padding: 8px;">

		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="155px" size="mini"
			:label-position="'left'">
			<el-row :gutter="20">
				<el-col :span="8">
					<el-form-item label="主服务器IP" prop="masterIp">
						<el-input v-model="ruleForm.masterIp" size="mini"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="主服务器端口" prop="masterPort">
						<el-input v-model="ruleForm.masterPort" size="mini"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="APN接入方式" prop="masterApn">
						<el-select v-model="ruleForm.masterApn" size="mini">
							<el-option label="CMNET" :value="'CMNET'"></el-option>
							<el-option label="CMWAP" :value="'CMWAP'"></el-option>
							<el-option label="CARD" :value="'CARD'"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">

				<el-col :span="8">
					<el-form-item label="拨号用户名" prop="masterUserName">
						<el-input v-model="ruleForm.masterUserName" size="mini"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="拨号密码" prop="masterPassword">
						<el-input v-model="ruleForm.masterPassword" size="mini"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="备份服务器IP" prop="slaveIp">
						<el-input v-model="ruleForm.slaveIp" size="mini"></el-input>
					</el-form-item>
				</el-col>

			</el-row>

			<el-row :gutter="20">
				<el-col :span="8">
					<el-form-item label="备份服务器端口" prop="slavePort">
						<el-input v-model="ruleForm.slavePort" size="mini"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="备份APN接入方式" prop="slaveApn">
						<el-select v-model="ruleForm.slaveApn" size="mini">
							<el-option label="CMNET" :value="'CMNET'"></el-option>
							<el-option label="CMWAP" :value="'CMWAP'"></el-option>
							<el-option label="CARD" :value="'CARD'"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="备份拨号用户名" prop="slaveUserName">
						<el-input v-model="ruleForm.slaveUserName" size="mini"></el-input>
					</el-form-item>
				</el-col>

			</el-row>


			<el-row :gutter="20">
				<el-col :span="8">
					<el-form-item label="备份拨号密码" prop="slavePassword">
						<el-input v-model="ruleForm.slavePassword" size="mini"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="TCP链路应答超时时间" prop="tcpTimeout">
						<el-input v-model="ruleForm.tcpTimeout" size="mini">
							<template slot="append">秒</template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="TCP链路重传次数" prop="tcpR">
						<el-input v-model="ruleForm.tcpR" size="mini"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20">

				<el-col :span="8">
					<el-form-item label="UDP链路应答超时时间" prop="udpTimeout">
						<el-input v-model="ruleForm.udpTimeout" size="mini">
							<template slot="append">秒</template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="UDP链路重传次数" prop="udpR">
						<el-input v-model="ruleForm.udpR" size="mini">

						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="短信链路应答超时时间" prop="smsTimeout">
						<el-input v-model="ruleForm.smsTimeout" size="mini">
							<template slot="append">秒</template>
						</el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">

				<el-col :span="8">
					<el-form-item label="短信链路重传次数" prop="smsR">
						<el-input v-model="ruleForm.smsR" size="mini">
						</el-input>
					</el-form-item>
				</el-col>
			</el-row>

		</el-form>

		<div style="text-align: center;">
			<el-button type="primary" size="mini" @click="sendCmd" :loading="searchLoading"
				:disabled="searchLoading">查询</el-button>
			<el-button type="primary" size="mini" @click="sendZD" :loading="zdLoading"
				:disabled="zdLoading">发送至终端</el-button>
		</div>

	</div>
</template>

<script>
	import {
		sendCommond,
		getCmdSearchRS
	} from '@/api/ywgl.js'


	export default {
		name: 'txParam',
		props: {

			tableData: {
				type: Array,
				default: function() {
					return [];
				},
				required: true
			},

			curRow: {
				type: Object,
				default: function() {
					return null;
				},
				required: true
			}

		},
		watch: {
			curRow: {
				handler(val) {
					if (this.searchRS&&val) {
						if (this.searchRS[val.simNo].data) {
							this.ruleForm = this.searchRS[val.simNo].data[val.simNo]
						} else {
							this.ruleForm = {
								masterIp: null,
								masterPort: null,
								masterApn: null,
								masterUserName: null,
								masterPassword: null,
								slaveIp: null,
								slavePort: null,
								slaveApn: null,
								slaveUserName: null,
								slavePassword: null,
								tcpTimeout: 0,
								tcpR: 0,
								udpTimeout: 0,
								udpR: 0,
								smsTimeout: 0,
								smsR: 0
							}
						}
					}
				},
				immediate: true,
				deep: true
			}
		},
		data() {
			return {
				ruleForm: {
					masterIp: null,
					masterPort: null,
					masterApn: null,
					masterUserName: null,
					masterPassword: null,
					slaveIp: null,
					slavePort: null,
					slaveApn: null,
					slaveUserName: null,
					slavePassword: null,
					tcpTimeout: 0,
					tcpR: 0,
					udpTimeout: 0,
					udpR: 0,
					smsTimeout: 0,
					smsR: 0
				},
				rules: {

				},
				requestCount: 0,
				countTime: new Date(),
				intervalId: null,
				searchLoading: false,
				zdLoading: false,

				rsParam: [],
				searchRS: null
			}
		},
		methods: {
			startSendingRequests() {
				this.countTime = new Date()
				this.intervalId = setInterval(() => {
					const elapsedTime = Date.now() - this.countTime;
					if (elapsedTime >= 60000) {
						clearInterval(this.intervalId);
						this.searchLoading = false
						this.$message({
							message: '终端未响应',
							type: 'warning'
						})
						return;
					}

					getCmdSearchRS({
						json: JSON.stringify(this.rsParam)
					}).then(res => {
						if (res.code === 200) {
							clearInterval(this.intervalId);
							console.log('请求成功，已停止发送请求');
							this.searchLoading = false
							this.searchRS = res.data
							this.$emit('on-search', res.data)

						} else if (res.code === 201) {
							this.searchRS = res.data
							this.$emit('on-search', res.data)

						}

					})
					this.requestCount++;
					if (this.requestCount >= 60 && !this.responseData) {
						clearInterval(this.intervalId);
						this.searchLoading = false
						this.$message({
							message: '终端未响应',
							type: 'warning'
						})
						console.log('已发送60次请求但未成功，停止发送请求');
					}
				}, 1000);
			},

			sendCmd() {
				const simNos = this.tableData.map(e => e.simNo)
				const param = {
					type: 'txParam',
					status: 'search',
					simNos: simNos,
					...this.ruleForm
				}

				this.searchLoading = true
				this.requestCount = 0
				this.ruleForm = {
					masterIp: null,
					masterPort: null,
					masterApn: null,
					masterUserName: null,
					masterPassword: null,
					slaveIp: null,
					slavePort: null,
					slaveApn: null,
					slaveUserName: null,
					slavePassword: null,
					tcpTimeout: 0,
					tcpR: 0,
					udpTimeout: 0,
					udpR: 0,
					smsTimeout: 0,
					smsR: 0
				}
				this.$emit('init-table', {})

				sendCommond({
					json: JSON.stringify(param)
				}).then(res => {
					if (res.code === 200) {
						this.rsParam = res.data
						this.startSendingRequests()
					}
				})
			},
			sendZD() {
				const simNos = this.tableData.map(e => e.simNo)
				const param = {
					type: 'txParam',
					status: 'send',
					simNos: simNos,
					...this.ruleForm
				}

				this.zdLoading = true
				this.requestCount = 0
				this.$emit('init-table', {})
				sendCommond({
					json: JSON.stringify(param)
				}).then(res => {
					if (res.code === 200) {
						console.log(res.data)
						this.zdLoading = false
					}
				})
			}
		}
	}
</script>

<style>
</style>